<template>
	<view id="course_list" class="select-list nested-sortable">
		<view class="item" v-for="(item,index) in list" :key="index" @click="changeExpand(item,index)">
			<view class="classA uv-flex-row" style="align-items: center;height: 42px;justify-content: space-between;padding: 0 10px;cursor: pointer;">
				<view class="info uv-flex-row" style="align-items: center;">
					<uv-icon name="arrow-down" color="#fff" :style="{transition: 'all .2s',transform: `rotate(${item.expand?0:-90}deg)`}"></uv-icon>
					<view v-if="showCheck" class="checkbox" :class="[{'is-checked':hasCheck(item)}]" @click.stop="selectAll(item,hasCheck(item),allCheck(item))">
						<view class="checked" :style="[{opacity: hasCheck(item)?1:0}]">
							<uv-icon :name="allCheck(item)? 'checkmark':'minus'" color="#fff" size="14px"></uv-icon>
						</view>
					</view>
					<text style="margin-left: 10px;color: #fff;">{{item.courseGroupName}}</text>
				</view>
				<view @click.stop="more" :class="item.courseGroup"><uv-icon name="more-dot-fill" color="#fff"></uv-icon></view>
			</view>
			<view class="classBList nested-sortable" :id="`classBList_${index}`">
				<view v-for="(item2,index2) in item.courses" :data-id="item2.courseId" :key="index2" class="classB uv-flex-row" style="justify-content: space-between;align-items: center;height: 40px;padding: 0 10px 0 26px;cursor: pointer;">
					<view class="info uv-flex-row" style="align-items: center;">
						<view v-if="showCheck" class="checkbox" :class="[{'is-checked':item2.checked}]" @click.stop="select(item2)">
							<view class="checked" :style="{opacity: item2.checked?1:0}">
								<uv-icon name="checkmark" color="#fff" size="14px"></uv-icon>
							</view>
						</view>
						<text style="margin-left: 10px;color: #fff;">{{item2.name}}</text>
					</view>
					<view @click.stop="more" :class="`C-${item2.courseId}`"><uv-icon name="more-dot-fill" color="#fff"></uv-icon></view>
				</view>
				<view style="padding: 0 34px;height: 40px;align-items: center;cursor: pointer;" class="uv-flex-row">
					<view @click.stop="add(item)"><uv-icon name="plus" color="#fff" size="14px"></uv-icon></view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { computed, reactive, getCurrentInstance, ref, onMounted, watch } from 'vue';
	import { animateHeight } from '@/common/utils/index.js'
	onMounted(() => {
		import('@/common/js/sortablejs/Sortable.min.js').then(module => {
			var nestedSortables = [].slice.call(document.querySelectorAll('.nested-sortable'));
			for (var i = 0; i < nestedSortables.length; i++) {
				new Sortable(nestedSortables[i], {
					group: {
						name: 'course_list',
						pull: true,
						put: function(e) {
							return e.el.getAttribute('id') == 'course_list' ? false : true;
						}
					},
					animation: 150,
					// 列表内元素顺序更新的时候触发
					onUpdate: function(v) {
						var ddd = [].slice.call(document.querySelectorAll('.classB'));
						for (var i = 0; i < ddd.length; i++) {
							console.log(ddd[i].getAttribute('data-id'))
						}
					}
				})
			}
		});
		watch(() => list, (newVal) => {
			newVal.map((item, index) => {
				changeExpand(item, index, 0);
			})
		}, { immediate: true })
	})
	const { ctx } = getCurrentInstance();
	const auto = ref(false)
	const emits = defineEmits(['select', 'more', 'add']);
	const props = defineProps({
		list: {
			type: Array,
			default () {
				return []
			}
		},
		showCheck: {
			type: Boolean,
			default: false
		}
	})
	const hasCheck = computed((item) => {
		return item => {
			const arr = item.courses.filter(o => o.checked);
			return arr.length > 0;
		}
	})
	const allCheck = computed((item) => {
		return item => {
			const arr = item.courses.filter(o => o.checked);
			return arr.length == item.courses.length;
		}
	})

	function changeExpand(item, index, duration = 200) {
		item.expand = !item.expand;
		const el = document.getElementById(`classBList_${index}`);
		if (duration == 0) {
			el.style.height = item.expand ? 0 : 'auto';
		} else {
			animateHeight(el, item.expand ? 0 : 'auto', duration);
		}
	}

	function select(item) {
		item.checked = !item.checked;
		emits('select', item)
	}

	function selectAll(item, hasCheck, allCheck) {
		item.courses.map(o => {
			o.checked = allCheck ? false : hasCheck ? hasCheck : true;
		})
		emits('select', item.courses)
	}
	async function more(item, el) {
		const rect = await ctx.$uv.getRect(`.${el}`);
		emits('more', { item, rect });
	}

	function add(item) {
		emits('add', item)
	}
</script>
<style scoped lang="scss">
	.select-list {
		width: 200px;
		background: #000;
		.checkbox {
			position: relative;
			width: 20px;
			height: 20px;
			border-radius: 4px;
			border: 2px solid #666;
			margin-left: 10px;
			&.is-checked {
				border-color: red;
			}
			.checked {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				background: red;
				transition: all .2s;
			}
		}
		.classBList {
			height: auto;
			transition: all .2s;
			overflow: hidden;
		}
	}
</style>